<template>
  <div
    v-show="showNavTab"
    class="nav_tab_warp"
    :class="{ fixed: showMiniStyle, abs: !showMiniStyle }"
  >
    <ul :class="{ mini: showMiniStyle }">
      <li
        v-for="(item, index) in tabList"
        :key="index"
        :class="{
          active: item.highlight,
          two_tab: tabList.length == 2,
          three_tab: tabList.length == 3,
          four_tab: tabList.length == 4,
          mini_style: showMiniStyle
        }"
        :style="{ backgroundColor: item.highlight ? item.selectColor : '#fff' }"
        @click="handlerClick(item, index)"
      >
        <img v-if="item.highlight" :src="item.logoImgReverse" alt="" />
        <img v-else :src="item.logoImg" alt="" />
        <p class="more_text1">{{ item.name }}</p>
        <div
          v-if="item.highlight && !showMiniStyle"
          class="triangle"
          :style="borderColor"
        ></div>
        <div v-if="item.highlight && showMiniStyle" class="line"></div>
      </li>
    </ul>
  </div>
</template>
<script>
import { throttle } from 'lodash';

export default {
  props: {
    tabList: {
      type: Array,
      default() {
        return [];
      }
    },
    currentTab: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentIndex: 0,
      showNavTab: true,
      showMiniStyle: false // 是否需要切换为mini样式
    };
  },
  computed: {
    borderColor() {
      let selectColor = null;
      this.tabList.forEach(item => {
        if (item.highlight) {
          selectColor = item.selectColor;
        }
      });
      return `border-bottom-color:${selectColor};border-left-color:${selectColor};`;
    }
  },
  mounted() {
    this.currentIndex = this.currentTab;
    window.addEventListener(
      'scroll',
      throttle(
        () => {
          let seckillDOM = document.querySelector('.seckill');
          let channelDOM = document.querySelector('#channel-container');
          this.showMiniStyle =
            document.querySelector('body').getBoundingClientRect().top < -3;
          if (channelDOM) {
            this.showNavTab = channelDOM.getBoundingClientRect().top >= 5;
          } else if (!channelDOM && seckillDOM) {
            const seckillTOP = seckillDOM.getBoundingClientRect().top;
            this.showNavTab = seckillTOP > 100;
          }
        },
        100,
        { trailing: true }
      )
    );
  },
  methods: {
    handlerClick(data) {
      this.$emit('tabClick', data);
    }
  }
};
</script>
<style lang="scss" scoped>
.nav_tab_warp {
  position: absolute;
  top: 0;
  width: 100%;
  height: 80px;
  z-index: 999;
  ul {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    height: 70px;
    min-width: 100%;
    // position: absolute;
    // left: 0;
    // top: 0;
    transition-property: height, left;
    transition-timing-function: ease;
    transition-duration: 0.3s, 0.3s;

    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
  }
  .mini {
    height: 50px;
  }
  li {
    height: 60px;
    align-items: center;
    min-width: 86px;
    background: #ffffff;
    box-shadow: 0px 0px 0px 0px rgba(233, 233, 233, 1);
    border-right: 1px solid rgba(233, 233, 233, 1);
    box-sizing: border-box;
    position: relative;
    transition: height ease 0.3s;
    img {
      width: 52px;
      height: 26px;
      object-fit: cover;
      margin: 4px auto;
      opacity: 1;
      transition-property: width, opacity, height;
      transition-duration: 0.3s, 0.3s, 0.3s;
      display: block;
      transition: margin 0.3s ease 0;
    }
    p {
      text-align: center;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
    .triangle {
      width: 0;
      height: 0;
      border-bottom: 10px solid red;
      border-left: 10px solid red;
      position: absolute;
      left: 50%;
      // transform: translateX(-50%);
      top: 55px;
      z-index: 99;
      transform: rotate(45deg) translateX(-50%);
      display: block;
      opacity: 1;
      transition-property: border-bottom;
      transition-delay: 0.2s;
      // transition-timing-function:ease;
      transition-duration: 0.1s;
    }
    .line {
      position: absolute;
      width: 20px;
      height: 3px;
      background: rgba(255, 255, 255, 1);
      border-radius: 3px;
      left: 50%;
      transform: translateX(-50%);
      bottom: 3px;
      opacity: 0;
      transition: display ease 0.3s;
    }
  }
  .mini_style {
    height: 40px;
    line-height: 40px;
    img {
      opacity: 0;
      width: 80px;
      height: 0;
      margin: 0 auto;
      //  display: none;
    }
    .triangle {
      // opacity: 0;
      border-bottom: 10px solid transparent;
      // border-left: 0 solid transparent;
    }
    .line {
      opacity: 1;
    }
  }
  // 两个tab
  .two_tab {
    width: 50%;
  }
  .three_tab {
    width: 33.33%;
  }
  .four_tab {
    width: 25%;
  }
  .active {
    background-color: #ff1010;
    border: none;
    p {
      color: #ffffff;
    }
  }
}
.fixed {
  position: fixed;
  top: 0;
}
.abs {
  position: absolute;
  top: 0;
}
.more_text1 {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
</style>
